<template>
	<view class="content">
		<view class="container_item">
			<ul>
				<li @click="handleSwitch(index)" :key="index" v-for="(item,index) in tabs">
					<span :class="highLight===index?'avtive_li':''"> {{item}}</span>
					<view :class="highLight===index?'active_line btn_line':''">
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabs",
		data() {
			return {};
		},
		props: {
			tabs: {
				type: Array
			},
			highLight: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleSwitch(index) {
				this.$emit('sendNum', index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		width: 100%;
		border-radius: 20rpx;

		.container_item {
			ul {
				display: flex;
				justify-content: center;
				align-items: center;

				li {
					padding: 20rpx 0;
					text-align: center;
					position: relative;
					margin: 0 20rpx;
				}

				.btn_line {
					position: absolute;
					bottom: 10rpx;
					content: '';
					width: 100%;
					display: block;
					height: 6rpx;
					background-color: black;
				}

				.avtive_li {
					color: #000;
				}

				.active_line {
					background-color: #000;
				}
			}
		}
	}
</style>